﻿@using MudBlazor.Internal
@using MudBlazor.Resources
@namespace MudBlazor
@inherits MudPicker<TimeSpan?>
@inject InternalMudLocalizer Localizer

@Render

@code {

    protected override RenderFragment PickerContent => 
    @<CascadingValue Value="@this" IsFixed="true">
        <MudPickerToolbar Class="@ToolbarClassname" Style="@Style" ShowToolbar="@ShowToolbar" Orientation="@Orientation" PickerVariant="@PickerVariant" Color="@Color">
            <div class="mud-timepicker-hourminute mud-ltr">
                @if (TimeEditMode == TimeEditMode.Normal)
                {
                    <MudButton Variant="@Variant.Text" Color="@Color.Inherit" Class="@HoursButtonClassname" OnClick="@OnHourClickAsync">@GetHourString()</MudButton>
                    <MudText Typo="@Typo.h2" Class="mud-timepicker-separator">:</MudText>
                    <MudButton Variant="@Variant.Text" Color="@Color.Inherit" Class="@MinuteButtonClassname" OnClick="@OnMinutesClick">@GetMinuteString()</MudButton>
                }
                else
                {
                    <MudText Typo="Typo.h2" Class="mud-timepicker-separator">@GetHourString():@GetMinuteString()</MudText>
                }
            </div>
            @if (AmPm)
            {
                <div class="mud-timepicker-ampm">
                    <MudButton Variant="@Variant.Text" Color="@Color.Inherit" Class="@AmButtonClassname" OnClick="OnAmClickedAsync">AM</MudButton>
                    <MudButton Variant="@Variant.Text" Color="@Color.Inherit" Class="@PmButtonClassname" OnClick="OnPmClickedAsync">PM</MudButton>
                </div>
            }
        </MudPickerToolbar>
        <MudPickerContent>
            <div class="mud-picker-time-container">
                <div class="mud-picker-time-clock">
                    <div role="menu" tabindex="-1" class="mud-picker-time-clock-mask" @ref="ClockElementReference" @oncontextmenu:preventDefault>
                        <div class="@GetClockPinColor()"></div>
                        <div class="@GetClockPointerColor()" style="height: @GetPointerHeight(); transform: @GetPointerRotation()">
                            <div class="@GetClockPointerThumbColor()"></div>
                        </div>
                        <div class="@HourDialClassname">
                            @if (AmPm)
                            {
                                @*Hours from 1 to 12*@
                                for (int i = 1; i <= 12; ++i)
                                {
                                    var _i = i;
                                    var angle = (6 - _i) * 30;
                                    <MudText Class="@GetNumberColor(_i)" Style="@GetTransform(angle, 109, 0, 5)">@_i</MudText>
                                }
                                for (int i = 1; i <= 12; ++i)
                                {
                                    var _i = i;
                                    <div class="mud-picker-stick mud-hour" style="@($"transform: rotateZ({_i * 30}deg);")" data-stick-value="@_i"></div>
                                }
                            }
                            else
                            {
                                @*Hours from 13 to 24 (00)*@
                                for (int i = 1; i <= 12; ++i)
                                {
                                    var _i = i;
                                    var angle = (6 - _i) * 30;
                                    <MudText Class="@GetNumberColor((_i + 12) % 24)" Style="@GetTransform(angle, 109, 0, 5)">@(((_i + 12) % 24).ToString("D2"))</MudText>
                                }
                                @*Hours from 1 to 12*@
                                for (int i = 1; i <= 12; ++i)
                                {
                                    var _i = i;
                                    var angle = (6 - _i) * 30;
                                    <MudText Class="@GetNumberColor(_i)" Typo="Typo.body2" Style="@GetTransform(angle, 74, 0, 40)">@(_i.ToString("D2"))</MudText>
                                }
                                for (int i = 1; i <= 12; ++i)
                                {
                                    var _i = i;
                                    <div class="mud-picker-stick" style="@($"transform: rotateZ({_i * 30}deg);")">
                                        <div class="mud-picker-stick-inner mud-hour" data-stick-value="@_i"></div>
                                        <div class="mud-picker-stick-outer mud-hour" data-stick-value="@((_i + 12) % 24)"></div>
                                    </div>
                                }
                            }
                        </div>
                        <div class="@MinuteDialClassname">   
                            @*Minutes from 05 to 60 (00) - step 5*@                     
                            @for (int i = 0; i < 12; ++i)
                            {
                                var _i = i;
                                var angle = (6 - _i) * 30;
                                <MudText Class="@GetNumberColor(_i * 5)" Style="@GetTransform(angle, 109, 0, 5)">@((_i * 5).ToString("D2"))</MudText>
                            }
                            @for (int i = 0; i < 60; ++i)
                            {
                                var _i = i;
                                <div class="mud-picker-stick mud-minute" style="@($"transform: rotateZ({_i * 6}deg);")" data-stick-value="@_i"></div>
                            }
                        </div>
                    </div>
                </div>
            </div>
        </MudPickerContent>
    </CascadingValue>;

}
